<template>
	<div>
		<!-- 出坯操作 -->
		<pol-title title="浇铸实绩">
			<template #right>
				<div class="flex align-center text-lg text-bold padding-right">
					<el-icon>
						<BrushFilled />
					</el-icon>
					<router-link :to="{ name: 'ProductionSpraying' }">
						<span class="margin-left-sm cursor text-green2">喷号管理</span>
					</router-link>
				</div>
			</template>
		</pol-title>

		<div class="padding-lr border-solid bg-tm radius-sm main-box-height">
			<div class="text-xl padding-lg text-white">实时浇铸信息</div>

			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt" height="300px"></pol-table>


			<div class="flex text-white el-input-num">
				<div class="flex-sub">
					<pol-title title="炉次信息"></pol-title>
					<div class="flex align-center margin-top-lg padding-lr">
						<div style="flex: 0 0 70px">当前切割</div>
						<el-input placeholder="" size="large" class="margin-lr" />
						<el-button type="primary" class="btn-bg-blue" size="large">强制切割完成</el-button>
					</div>

					<div class="flex align-center margin-top-lg padding-lr">
						<div style="flex: 0 0 70px">当前切割</div>
						<el-input placeholder="" size="large" class="margin-lr" />
						<el-button type="primary" class="btn-bg-blue" size="large">设置切割炉号</el-button>
					</div>
				</div>

				<div class="flex-sub margin-left-xxl padding-left-xl">
					<pol-title title="切割支数"></pol-title>
					<div class="flex">
						<div class="flex-sub">
							<div class="flex align-center margin-top-lg padding-lr">
								<div style="flex: 0 0 70px">设计支数</div>
								<el-input placeholder="" size="large" class="margin-lr" />
								<div style="flex: 0 0 90px;">
									<el-button icon="Edit" type="primary" class="btn-bg-blue" size="large">修改</el-button>
								</div>
							</div>

							<div class="flex align-center margin-top-lg padding-lr">
								<div style="flex: 0 0 70px">转盘计数</div>
								<el-input placeholder="" size="large" class="margin-lr" />
								<div style="flex: 0 0 90px;"></div>
							</div>
						</div>
						<div class="flex-sub flex justify-end align-start padding-right-xl margin-right-xl margin-top-lg">
							<div class="flex align-center">
								<div style="flex: 0 0 90px">已切割支数</div>
								<el-input-number v-model="qgs" controls-position="right" size="large"></el-input-number>
							</div>
						</div>
					</div>
				</div>
			</div>


			<div class="flex margin-top-xl padding-top-xl">
				<div class="hidden lcinfo-box">
					<pol-title title="炉次信息"></pol-title>
					<!-- 表格 -->
					<pol-table ref="polTableRef" v-bind="tableOpt2"></pol-table>
				</div>

				<div class="flex-sub hidden margin-left-xl">
					<pol-title title="铸坯信息"></pol-title>
					<!-- 表格 -->
					<pol-table ref="polTableRef" v-bind="tableOpt3"></pol-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';

	const qgs = ref(15)

	const polTableRef = ref(null); //表格ref
	//表格配置
	const columns = ref([
		{ label: '二级炉号', key: 'ItemCode', align: 'center' },
		{ label: '制作命令', key: 'ItemName', align: 'center' },
		{ label: '熔炼号', key: 'ItemValue', align: 'center' },
		{ label: '上台时刻', key: 'IsDefault', align: 'center' },
		{ label: '炉次状态', key: 'P_IsSys', align: 'center' },
		{ label: '当前钢种', key: 'P_IsReadOnly', align: 'center' },
		{ label: '上台毛重', key: 'gangbao', align: 'center' },
		{ label: '浇注毛重', key: 'kaishi', align: 'center' },
		{ label: '收得率', key: 'chongzhi', align: 'center' },
		{ label: '理论支数', key: 'gangzhong', align: 'center' },
		{ label: '正常还支数', key: 'caozhuo', align: 'center' },
		{ label: '正常还重量', key: 'lujin', align: 'center' },
		{ label: '废还支数', key: 'lujin2', align: 'center' },
		{ label: '废还重量', key: 'lujin3', align: 'center' },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '202409458',
				ItemName: 'MA24499',
				ItemValue: '24408978',
				IsDefault: '24-11-19 10:33',
				P_IsSys: '水口打开',
				P_IsReadOnly: '45',
				gangbao: '197.3',
				kaishi: '41.1',
				chongzhi: '74%',
				gangzhong: '0',
				caozhuo: '0',
				lujin: '0',
				lujin2: '0',
				lujin3: '0',
			},
			{
				ItemCode: '202409458',
				ItemName: 'MA24499',
				ItemValue: '24408978',
				IsDefault: '24-11-19 10:33',
				P_IsSys: '水口打开',
				P_IsReadOnly: '45',
				gangbao: '197.3',
				kaishi: '41.1',
				chongzhi: '74%',
				gangzhong: '0',
				caozhuo: '0',
				lujin: '0',
				lujin2: '0',
				lujin3: '0',
			},
			{
				ItemCode: '202409458',
				ItemName: 'MA24499',
				ItemValue: '24408978',
				IsDefault: '24-11-19 10:33',
				P_IsSys: '水口打开',
				P_IsReadOnly: '45',
				gangbao: '197.3',
				kaishi: '41.1',
				chongzhi: '74%',
				gangzhong: '0',
				caozhuo: '0',
				lujin: '0',
				lujin2: '0',
				lujin3: '0',
			},
		]
	});

	//表格配置
	const columns2 = ref([
		{ label: '炉号', key: 'ItemCode', align: 'center' },
		{ label: '钢种', key: 'ItemName', align: 'center' },
		{ label: '开浇重量', key: 'ItemValue', align: 'center' },
		{ label: '离台重量', key: 'IsDefault', align: 'center' },
		{ label: '中包净重', key: 'P_IsSys', align: 'center' },
		{ label: '开浇时间', key: 'P_IsReadOnly', align: 'center' },
		{ label: '完浇时间', key: 'gangbao', align: 'center' },
		{ label: '1流坯数', key: 'kaishi', align: 'center' },
		{ label: '2流坯数', key: 'chongzhi', align: 'center' },
		{ label: '总坯数', key: 'gangzhong', align: 'center' },
		{ label: '浇铸重量', key: 'caozhuo', align: 'center' },
		{ label: '直轧支数', key: 'lujin', align: 'center' },
	]);

	//表格配置
	const tableOpt2 = ref({
		columns: columns2.value,
		localData: [{
				ItemCode: '24408977',
				ItemName: '45',
				ItemValue: '203.841',
				IsDefault: '70.204',
				P_IsSys: '27.613',
				P_IsReadOnly: '09:43:55',
				gangbao: '10:33:10',
				kaishi: '7',
				chongzhi: '8',
				gangzhong: '15',
				caozhuo: '133.64',
				lujin: '0',
			},
			{
				ItemCode: '24408977',
				ItemName: '45',
				ItemValue: '203.841',
				IsDefault: '70.204',
				P_IsSys: '27.613',
				P_IsReadOnly: '09:43:55',
				gangbao: '10:33:10',
				kaishi: '7',
				chongzhi: '8',
				gangzhong: '15',
				caozhuo: '133.64',
				lujin: '0',
			},
			{
				ItemCode: '24408977',
				ItemName: '45',
				ItemValue: '203.841',
				IsDefault: '70.204',
				P_IsSys: '27.613',
				P_IsReadOnly: '09:43:55',
				gangbao: '10:33:10',
				kaishi: '7',
				chongzhi: '8',
				gangzhong: '15',
				caozhuo: '133.64',
				lujin: '0',
			},
			{
				ItemCode: '24408977',
				ItemName: '45',
				ItemValue: '203.841',
				IsDefault: '70.204',
				P_IsSys: '27.613',
				P_IsReadOnly: '09:43:55',
				gangbao: '10:33:10',
				kaishi: '7',
				chongzhi: '8',
				gangzhong: '15',
				caozhuo: '133.64',
				lujin: '0',
			},

			{
				ItemCode: '24408977',
				ItemName: '45',
				ItemValue: '203.841',
				IsDefault: '70.204',
				P_IsSys: '27.613',
				P_IsReadOnly: '09:43:55',
				gangbao: '10:33:10',
				kaishi: '7',
				chongzhi: '8',
				gangzhong: '15',
				caozhuo: '133.64',
				lujin: '0',
			},
			{
				ItemCode: '24408977',
				ItemName: '45',
				ItemValue: '203.841',
				IsDefault: '70.204',
				P_IsSys: '27.613',
				P_IsReadOnly: '09:43:55',
				gangbao: '10:33:10',
				kaishi: '7',
				chongzhi: '8',
				gangzhong: '15',
				caozhuo: '133.64',
				lujin: '0',
			},
			{
				ItemCode: '24408977',
				ItemName: '45',
				ItemValue: '203.841',
				IsDefault: '70.204',
				P_IsSys: '27.613',
				P_IsReadOnly: '09:43:55',
				gangbao: '10:33:10',
				kaishi: '7',
				chongzhi: '8',
				gangzhong: '15',
				caozhuo: '133.64',
				lujin: '0',
			},
		]
	});

	//表格配置
	const columns3 = ref([
		{ label: '铸坯号', key: 'ItemCode', align: 'center' },
		{ label: '流号', key: 'ItemName', align: 'center' },
		{ label: '长度', key: 'ItemValue', align: 'center' },
		{ label: '切割开始时间', key: 'IsDefault', align: 'center' },
		{ label: '切割结束时间', key: 'P_IsSys', align: 'center' }
	]);

	//表格配置
	const tableOpt3 = ref({
		columns: columns3.value,
		localData: [{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
			{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
			{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
			{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
			{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
			{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
			{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
			{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
			{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
			{
				ItemCode: '202409458',
				ItemName: '2',
				ItemValue: '8.68',
				IsDefault: '10:33',
				P_IsSys: '10:47:00',
			},
		]
	});
</script>

<style lang="scss" scoped>
	.lcinfo-box {
		flex-basis: 60%;
	}
</style>